<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #box {
            width: 1000px;
            height: 700px;
            border: 1px solid;
            margin: auto;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>

</html>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=Gz9karbOqhHtvCryOkCFFehPdS5ZSMr1"></script>
<script>
    let map = new BMapGL.Map("box")
    // let zuobiao = new BMapGL.Point(115.312401, 38.439256)

    map.centerAndZoom(new BMapGL.Point(115.312401, 38.439256), 13)
    // 缩放控件
    let suofang = new BMapGL.ZoomControl()
    map.addControl(suofang)
    // 比例尺
    let bilichi = new BMapGL.ScaleControl()
    map.addControl(bilichi)
    // 开启滚轮
    map.enableScrollWheelZoom(true)
    // 倾斜角度
    map.setTilt(60)
    // 旋转角度
    map.setHeading(60)
    // 可以缩放到地球
    // map.setMapType(BMAP_EARTH_MAP)

    // 3.23
    // 给地图添加主题
    map.setMapStyleV2({
        styleId: "8c9cf3c3f0ffc89766f579c71f5c9a05"
    })

    // 添加图标
    let tubiao = new BMapGL.Icon('https://m.360buyimg.com/babel/jfs/t1/36478/38/5384/2901/5cbf065aEb0c60a12/afb4399323fe3b76.png', new BMapGL.Size(20, 20), {
        anchor: new BMapGL.Size(0, 0),
        imageOffset: new BMapGL.Size(0, 0)
    })

    let marker = new BMapGL.Marker(new BMapGL.Point(115.312401, 38.439256), { icon: tubiao })
    map.addOverlay(marker)

    // 添加折线

    let zhexian = new BMapGL.Polyline([
        new BMapGL.Point(115.298742, 38.448875),
        new BMapGL.Point(115.375853, 38.445088),
        new BMapGL.Point(115.32871, 38.39539),
        new BMapGL.Point(115.298742, 38.448875),
    ], { strokeColor: "red", strokeWeight: 5, strokeOpacity: 0.3 })

    map.addOverlay(zhexian)

    // 添加多边形

    let duobianxing = new BMapGL.Polygon([
        new BMapGL.Point(115.245239, 38.522563),
        new BMapGL.Point(115.244089, 38.390101),
        new BMapGL.Point(115.401616, 38.375167),
        new BMapGL.Point(115.40909, 38.462466),
    ], { strokeColor: "red", strokeWeight: 5, strokeOpacity: 0.3 })

    map.addOverlay(duobianxing)

    // 添加文字

    let wenzi = new BMapGL.Label("安国市", {
        offset: new BMapGL.Size(-20, 0),
        position: new BMapGL.Point(115.316097, 38.417925),
    })
    map.addOverlay(wenzi)

    wenzi.setStyle({
        color: "orange",
        fontSize: "18px",
        border: "none"
    })



    wenzi.addEventListener("click", function () {
        // 弹框内文字
        let tkwenzi = new BMapGL.InfoWindow("欢迎来到我的家乡安国市")

        map.openInfoWindow(tkwenzi, new BMapGL.Point(115.316097, 38.417925))
    }, false)
</script>